<script setup>
import { UploadFilled, Upload } from '@element-plus/icons-vue'
import { ElMessage, genFileId } from 'element-plus'
import { uploadFileServices, addYearMonthAndToSqlServices } from '@/api/file'
import { baseURL } from '@/utils/request'
import { ref } from 'vue'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
const canUpload = ref(true)
const canTranslate = ref(true)
const fileName = ref('')
const filePath = ref('')
const excel = ref('')
const sql = ref('')
const upload = ref()
const sqlLoading = ref(false)
// 只允许上传一个，上传多个以后替换文件
const handleExceed = files => {
    upload.value.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    upload.value.handleStart(file)
}
// 点击上传触发上传
const submitUpload = () => {
    upload.value.submit()
}
// 上传时的具体执行逻辑
const customUpload = async file => {
    const formData = new FormData()
    formData.append('file', file.file)
    try {
        const res = await uploadFileServices(formData)
        fileName.value = res.data.file_name
        filePath.value = res.data.file_path
        excel.value = baseURL + res.data.file_down_url
        console.log(excel.value)
        upload.value.clearFiles()
        ElMessage.success('上传成功')
        canUpload.value = true
        canTranslate.value = false
    } catch (error) {
        ElMessage.error('上传失败')
    }
}

// 将文件添加年月并转成sql
const addYearMonthAndToSql = async () => {
    try {
        sqlLoading.value = true
        const res = await addYearMonthAndToSqlServices(filePath.value)
        sql.value = res.data.sql
        ElMessage.success('操作成功')
        canTranslate.value = true
        sqlLoading.value = false
    } catch (error) {
        ElMessage.error('操作失败')
    }
}

const onCanUpload = () => {
    canUpload.value = false
}

// 检测文件是否上传
</script>

<template>
    <el-card class="main-card">
        <!--文件上传-->
        <el-upload ref="upload" class="upload-demo" drag action="#" :multiple="false" accept=".xlsx" :auto-upload="false" :limit="1" :on-exceed="handleExceed" :http-request="customUpload" :on-change="onCanUpload">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">选择文件</div>
        </el-upload>
        <el-button auto-insert-space class="upload-button" type="primary" @click="submitUpload" :disabled="canUpload"
            >点击上传 <el-icon class="el-icon--right"><Upload /></el-icon
        ></el-button>
        <!-- <p v-if="fileName != ''"><strong>文件名称：</strong> {{ fileName }}</p> -->
        <!-- <p v-if="filePath != ''"><strong>服务器文件路径：</strong> {{ filePath }}</p> -->
        <vue-office-excel class="file" :src="excel" @rendered="rendered" />
        <el-button auto-insert-space class="turn-button" type="primary" @click="addYearMonthAndToSql" :disabled="canTranslate">转成sql</el-button>

        <div style="overflow: auto; height: 300px" v-loading="sqlLoading" class="div-scroll"><strong></strong> {{ sql }}</div>
    </el-card>
</template>

<style scoped>
.main-card {
    .upload-button {
        margin-left: 40%;
        width: 20%;
        height: 50px;
    }

    .turn-button {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 40%;
        width: 20%;
        height: 50px;
    }

    .div-scroll {
        &::-webkit-scrollbar {
            width: 6px;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.2);
        }
        &::-webkit-scrollbar-track {
            border-radius: 2px;
            background: rgba(0, 0, 0, 0.1);
        }
    }
    .file {
        margin-top: 20px;
        margin-bottom: 20px;
        height: 300px;
    }
}
</style>
